import { computed, ref } from 'vue';

export function useImageLoad() {
  const isLoaded = ref(false);
  const realHeight = ref(0);

  const style = computed(() => {
    return `width: 100%; height: ${realHeight.value}px; opacity: ${isLoaded ? 1 : 0}`;
  });

  function handleImageLoad(e: AnyObject) {
    const { width, height } = e.detail;
    const { screenWidth } = uni.getWindowInfo();
    const ratio = screenWidth / width;
    realHeight.value = height * ratio;
    isLoaded.value = true;
  }

  return {
    imageHeight: realHeight,
    imageStyle: style,
    onImageLoad: handleImageLoad
  };
}
